<template>
  <div>
    <div class="s_top">
      <i class="iconfont icon852zuojiantou" @click="gotolink"></i>
      <div>
        <input type="text" v-model=" info " placeholder="搜索音乐、歌手、歌词、用户" />
        <i class="iconfont iconsousuo" @click="btn"></i>
      </div>
    </div>
    <ul class="s_ul">
        最佳匹配<div>{{ items[0]?'':'暂无'}}<img v-bind:src="items[0]?items[0].pic:''"><span>{{ items[0]?'歌手 : '+items[0].author:''}}</span></div>
      <li class="s_li" v-for="(item,index) in items" :key="index">
        <p>{{ item.title }}</p>
      <i class="iconfont iconttpodicon"></i> <span>{{ item.author }}</span>
      </li>
    </ul>
    <div>
    <van-cell-group>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Cell, CellGroup } from 'vant'
Vue.use(Cell).use(CellGroup)
export default {
  name: 'Search',
  data () {
    return {
      info: '',
      items: []
    }
  },
  methods: {
    btn () {
      axios
        .get('https://api.apiopen.top/searchMusic?name=' + this.info)
        // .then(Response => console.log(Response.data.result))
        .then(Response => (this.items = Response.data.result))
    },
    gotolink () {
      this.$router.replace('/home')
    }
  }
}
</script>
<style lang='scss'>
.s_top {
  height: 60px;
  width: 100%;
  background: rgb(260, 61, 62);
  color: white;
  display: flex;
  align-items: center;
  i {
    margin: 0 15px;
  }
  .iconsousuo,
  .icon852zuojiantou {
    font-size: 24px;
  }
  div {
    border-bottom: 1px solid white;
  }
  input {
    height: 30px;
    width: 225px;
    padding-left: 15px;
    color: rgba(255, 255, 255, 0.6);
    background: rgb(260, 61, 62);
    border: 0;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
  }
  ::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}

.s_ul {
    padding:10px;
    padding-bottom:20px;
  background: rgba(242, 244, 245);
  font-size: 14px;
  color: #555;
  img{
    width: 50px;
  }
  >div{
    // height: 50px;
    margin-top:10px;
    color: #000;
    position: relative;
    span{
      position: absolute;
      left: 60px;
      top: 20px;
    }
  }
}
.s_li {
  font-size: 16px;
    padding:10px;

  p {
    color:rgb(60, 120, 179);
    padding:5px 0px;
    font-size: 18px
  }
  .iconttpodicon{
    color: rgb(260, 61, 62)
  }
}
</style>
